<template>
	<view class="service-content">
		<view class="serviceType">
			<text class="text-1">服务类型</text>
			<text class="text-2">{{serviceName}}服务</text>
		</view>
		<view class="select-box" v-for="(item,index) in dataList" :key="index">
			<text class="text-1">{{item.text1}}</text>
			<uni-combox :candidates="item.candidates" placeholder="请选择" style="width: 90px;"></uni-combox>
		</view>
		<view class="button-box">
			<button type="default" @click="createService">创建</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serviceName: "",
				dataList: [{
					text1: "服务用户",
					candidates: ["张三", "李四", "王五"]
				}, {
					text1: "服务地址",
					candidates: ["上海浦东", "上海浦西", "上海崇明"]
				}, {
					text1: "服务时间",
					candidates: ["半小时", "一小时", "一个半小时"]
				}, {
					text1: "服务费用",
					candidates: ["100元", "200元", "300元"]
				}]

			}
		},
		onLoad: function(option) {
			this.serviceName = option.id
		},
		methods: {
			createService(){
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.service-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.serviceType {
		width: 95%;
		height: 60px;
		border-radius: 5px;
		box-shadow: 0px 0px 5px #9e9e9e;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 15px;
		margin-top: 25px;

		&>.text-1 {
			color: #999999;
		}
	}

	.select-box {
		width: 95%;
		height: 60px;
		border-radius: 5px;
		box-shadow: 0px 0px 5px #9e9e9e;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 15px;
		margin-top: 15px;

		&>.text-1 {
			color: #999999;
		}
	}

	.button-box {
		margin-top: 150px;
		text-align: center;
		width: 95%;
		&>button {
			border-radius: 6px;
			background-color: #2168DB;
			width: 100%;
			color: #fff;
		}
	}
</style>
